<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      :class="{'van-toggle-nav':toggleNav}"
      left-arrow
      :border="false"
      fixed
      @click-left="$utils.back($route.path)"
    >
      <span :class="{'color-white':toggleNav}" slot="title">详情</span>
      <van-icon name="ellipsis" slot="right" class="fs-42" />
    </van-nav-bar>

    <!-- 商品swiper -->
    <van-swipe :autoplay="3000" indicator-color="white" @change="swiperChange">
      <van-swipe-item @click="showSwiperImg" v-for="(item,index) in swiperImg" :key="index">
        <!-- <img class="van-swipe-item__img" v-lazy="item" alt="swiper" /> -->
        <van-image width="100%" height="6.5rem" v-lazy :src="item" alt="商品图片" fit="cover" />
      </van-swipe-item>
    </van-swipe>

    <!-- 商品信息 -->
    <van-cell-group>
      <van-cell>
        <template slot="title">
          <span class="fs-34 fw-700">复仇者联盟3DMax电影票</span>
        </template>
        <div slot="label">
          <p class="color-danger fs-30">￥98.00</p>
          <p class="color-gray-light">上映时间：今晚22：00</p>
        </div>
      </van-cell>
      <van-cell is-link>
        <template slot="title">
          <span class="mr-30">商品规格</span>
          <span class="color-gray-light">今晚22：00首映场</span>
        </template>
      </van-cell>
      <van-cell>
        <template slot="title">
          <span class="mr-30">购买数量</span>
          <van-button class="buy-btn" round type="danger" v-show="buyNum > 0" @click="reduceGood">-</van-button>
          <span class="plr-20 tac" v-show="buyNum > 0">{{buyNum}}</span>
          <van-button class="buy-btn" round type="danger" @click="addGood">+</van-button>
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 商品tab -->
    <van-tabs
      class="mt-20"
      title-active-color="#ff435b"
      title-inactive-color="#000000"
      color="#ff435b"
      sticky
      swipeable
      animated
      :offset-top="offsetTop"
    >
      <van-tab title="商品详情">
        <p class="pd-30 bg-white color-gray-light fs-24">
          《复仇者联盟4：终局之战》是安东尼·罗素和乔·罗素执导的美国科幻
          电影，改编自美国漫威漫画，是漫威电影宇宙第22部影片，由小罗伯特
          ·唐尼、克里斯·埃文斯、克里斯·海姆斯沃斯、马克·鲁法洛、斯嘉丽·约
          翰逊、杰瑞米·雷纳、保罗·路德、布丽·拉尔森、唐·钱德尔、凯伦·吉兰
          、乔什·布洛林等主演。
        </p>
      </van-tab>
      <van-tab title="商家">商家</van-tab>
    </van-tabs>

    <!-- 商品购物车 -->
    <shop-cart></shop-cart>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import shopCart from 'components/shopCart'
export default {
  components: {
    shopCart
  },
  data() {
    return {
      toggleNav: true,
      current: 0,
      // swiper图片
      swiperImg: [
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565242238026&di=0a8c3b130bb53774d5666b60ed1b4814&imgtype=0&src=http%3A%2F%2Fimg2.dwstatic.com%2Flol%2F1904%2F420398806542%2F420399018893.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565242295418&di=07076575ea6f3a5e482fdfeb7092a2c9&imgtype=0&src=http%3A%2F%2Fqimg.hxnews.com%2F2018%2F1204%2F1543883758898.jpg',
        'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565242315123&di=6354e3b335002f0021f735ccfa4fc611&imgtype=0&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2Fbf6742657a190283690a7551af63cfef.jpeg'
      ],
      buyNum: 1,
      offsetTop: 0
    }
  },
  methods: {
    //显现导航栏
    showNavBar() {
      let scrollTop = document.documentElement.scrollTop //滚动条的高
      if (scrollTop > 30) {
        this.toggleNav = false
      } else {
        this.toggleNav = true
      }
    },
    //监听swiper的index
    swiperChange(index) {
      this.swiperImgIndex = index
      this.current = index
    },
    // 预览swiper图片
    showSwiperImg(e) {
      let self = this
      ImagePreview({
        images: self.swiperImg,
        startPosition: self.swiperImgIndex,
        lazyLoad: true,
        onClose() {
          // do something
        }
      })
    },
    // 增加商品
    addGood() {
      this.buyNum = this.buyNum + 1
    },
    // 减少商品
    reduceGood() {
      this.buyNum = this.buyNum - 1
    }
  },
  created() {
    let self = this
    self.offsetTop = parseInt((document.body.clientWidth / self.$remUnit) * 10) //设置粘性布局时距离顶部距离PX换算
  },
  mounted() {
    let self = this
    // 监听页面滚动，dosomething，显现导航栏
    window.addEventListener('scroll', self.showNavBar)
  }
}
</script>

<style lang="scss" scoped>
.buy-btn {
  width: 50px;
  height: 50px;
  padding: 0;
  line-height: 50px;
}
</style>


